<template>
  <view class="login-container">
    <view class="logo-container">
      <text class="title">工单管理系统</text>
    </view>
    
    <view class="form-container">
      <view class="form-item">
        <text class="label">账号</text>
        <input 
          type="text" 
          v-model="account" 
          placeholder="请输入账号" 
          class="input"
        />
      </view>
      
      <view class="form-item">
        <text class="label">密码</text>
        <input 
          type="password" 
          v-model="password" 
          placeholder="请输入密码" 
          class="input"
        />
      </view>
      
      <button class="login-btn" @click="handleLogin">登录</button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { login } from '../../api/order.js'

// 1. 表单数据
const account = ref('')
const password = ref('')

// 2. 安全获取路由实例：添加兜底，避免 router 为 undefined
// 兜底逻辑：若路由未注入，用 uni.switchTab 跳转（适配小程序 Tab 页）
const router = useRouter?.() || {
  push: (url) => {
    if (url.includes('hall')) { // 抢单大厅是 Tab 页，用 switchTab
      uni.switchTab({ url })
    } else { // 其他页面用 navigateTo
      uni.navigateTo({ url })
    }
  }
}

// 3. 登录逻辑
const handleLogin = () => {
  // 表单校验
  if (!account.value) {
    uni.showToast({ title: '请输入账号', icon: 'none', duration: 1500 })
    return
  }
  if (!password.value) {
    uni.showToast({ title: '请输入密码', icon: 'none', duration: 1500 })
    return
  }
  
  // 发起登录请求
  uni.showLoading({ title: '登录中...' })
  login({
    account: account.value,
    password: password.value
  }).then(res => {
    uni.hideLoading()
    console.log('登录响应:', res) // 添加日志输出
    
    // 添加更完善的响应检查
    if (!res) {
      uni.showToast({ title: '服务器无响应', icon: 'none', duration: 2000 })
      return
    }
    
    if (res && res.code === 0) {
      // 登录成功：存储用户信息到本地
      uni.setStorageSync('userInfo', res.data)
      uni.showToast({ title: '登录成功', icon: 'success', duration: 1500 })
      
      // 跳转到抢单大厅
      setTimeout(() => {
        try {
          console.log('准备跳转到抢单大厅'); // 添加日志
          // 发送事件通知抢单大厅重新初始化位置服务
          uni.$emit('reinit-location-service');
          if (router && typeof router.push === 'function') {
            console.log('使用Vue Router跳转'); // 添加日志
            router.push('/pages/hall/hall') // 跳转到抢单大厅
          } else {
            console.log('使用uni.switchTab跳转'); // 添加日志
            // 降级处理
            uni.switchTab({ url: '/pages/hall/hall' })
          }
        } catch (e) {
          console.error('路由跳转异常:', e); // 增强错误日志
          // 跳转失败时，用 UniApp 原生 API 兜底
          try {
            uni.switchTab({ url: '/pages/hall/hall' })
          } catch (switchTabError) {
            console.error('switchTab也失败了:', switchTabError);
            uni.showToast({ title: '页面跳转失败', icon: 'none' })
          }
          console.log('路由跳转降级处理：', e)
        }
      }, 1500)
    } else {
      // 提供更详细的错误信息
      const errorMsg = (res && res.msg) || '登录失败，请检查账号密码'
      uni.showToast({ title: errorMsg, icon: 'none', duration: 2000 })
    }
  }).catch(err => {
    uni.hideLoading()
    console.error('登录失败详细信息:', err) // 增强错误日志
    
    // 根据错误类型提供更具体的提示
    let errorMsg = '登录失败，请检查网络'
    if (err && err.errMsg) {
      errorMsg = err.errMsg
    }
    
    uni.showToast({ title: errorMsg, icon: 'none', duration: 3000 })
    console.error('登录失败', err)
  })
}
</script>

<!-- 3. 声明 lang="scss"，确保 SCSS 变量能正常解析 -->
<style lang="scss">
.login-container {
  padding: 50rpx 30rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
  box-sizing: border-box;
}

.logo-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 80rpx;
  margin-top: 100rpx;
}

.title {
  font-size: 36rpx;
  color: #fff;
  font-weight: 600;
}

.form-container {
  width: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 20rpx;
  padding: 40rpx 30rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
}

.form-item {
  margin-bottom: 30rpx;
}

.label {
  display: block;
  font-size: $uni-font-size-base;
  color: $uni-text-color;
  margin-bottom: 10rpx;
  font-weight: 500;
}

.input {
  width: 100%;
  height: 80rpx;
  border: 1px solid $uni-border-color;
  border-radius: $uni-border-radius-base;
  padding: 0 20rpx;
  box-sizing: border-box;
  font-size: $uni-font-size-base;
  background-color: $uni-bg-color;
}

.login-btn {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: $uni-text-color-inverse;
  border-radius: $uni-border-radius-base;
  margin-top: 50rpx;
  font-size: $uni-font-size-base;
  font-weight: 500;
  border: none;
}
</style>